require('styles/normolize.css');
require('styles/discoverMusic.scss');

import React from 'react'
import LunBo from './lunbo.js'
import Content from './Content.js'

function Nav(props) {
  const list = props.list
  const listItems = list.map((item,index) => {
      return <li key={index} className={props.class}>
        <a href="#">
          <span>{item}</span>
        </a>
      </li>
    })
    return (
      <ul className='list clearfix'>{listItems}</ul>
    )
}

class DiscoverMusic extends React.Component{
  constructor(props) {
    super(props)
    this.state={
      coverMusic:['推荐','排行榜','歌单','主播电台','歌手','新碟上架']
    }
  }
  
  render() {
    return (
      <div className="discoverMusic">
        <div className="s-nav">
          <div className="banxin">
            <Nav list={this.state.coverMusic} class="s-nav-list"></Nav>
          </div>
        </div>
        <LunBo></LunBo>
        <Content></Content>
      </div>
    )
  }
}

export default DiscoverMusic;